<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="860" title="产品信息">
        <Row>
            <BoxCell title="产品代码">{{data.code}}</BoxCell>
            <BoxCell :width="3" title="产品标题">{{data.title}}</BoxCell>
            <BoxCell title="所属客户">{{data.customer.name}}</BoxCell>
            <BoxCell title="毛重">{{data.gross_weight}}</BoxCell>
            <BoxCell title="品牌">{{data.brand}}</BoxCell>
            <BoxCell title="海关编码">{{data.customs.code}}</BoxCell>
            <BoxCell title="法一数量">{{data.customs.qy1}}</BoxCell>
            <BoxCell title="法二数量">{{data.customs.qy2}}</BoxCell>
            <BoxCell title="海关品名">{{data.customs.name}}</BoxCell>
            <BoxCell title="申报单位">
                <RemoteSpan showCode url="common/select/unit" v-model="data.customs.unit"></RemoteSpan>
            </BoxCell>
            <BoxCell title="法一单位">
                <RemoteSpan showCode url="common/select/unit" v-model="data.customs.unit1"></RemoteSpan>
            </BoxCell>
            <BoxCell title="法二单位">
                <RemoteSpan showCode url="common/select/unit" v-model="data.customs.unit2"></RemoteSpan>
            </BoxCell>
            <BoxCell title="原产国">
                <RemoteSpan showCode url="common/select/country" v-model="data.customs.country"></RemoteSpan>
            </BoxCell>
            <BoxCell title="净重">{{data.customs.net_weight}}</BoxCell>
            <BoxCell :width="2" title="申报要素">{{data.customs.element}}</BoxCell>

            <BoxCell title="可用">{{data.inventory.usable}}</BoxCell>
            <BoxCell title="不可用">{{data.inventory.unusable}}</BoxCell>
            <BoxCell title="出库锁定">{{data.inventory.locked}}</BoxCell>
            <BoxCell title="出库">{{data.inventory.outbound}}</BoxCell>
            <BoxCell title="过期">{{data.inventory.expired}}</BoxCell>
            <BoxCell title="来货异常">{{data.inventory.anomalous}}</BoxCell>

        </Row>
        <Tabs value="name1">
            <TabPane label="日志" name="name1">
                <Logs v-model="data.logs"></Logs>
            </TabPane>
            <TabPane label="订单" name="order">
                <Order v-model="data.orders"></Order>
            </TabPane>
            <TabPane label="批次" name="batchs">
                <Batchs v-model="data.batchs"></Batchs>
            </TabPane>
        </Tabs>
        <div slot="footer">
            <Button type="warning" icon="md-log-out" @click="defaultValue = false;">返回</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/drawer";
    import BoxCell from "../../../components/content/boxCell";
    import Logs from "../../../components/content/logs";
    import RemoteSpan from "../../../components/content/remoteSpan";
    import Order from "./order";
    import Batchs from "./batchs";

    export default {
        name: "create",
        mixins: [contentDrawer],
        components: {Batchs, Order, RemoteSpan, BoxCell, IForm, IDrawer, Logs},
        data() {
            return {
                loading: false,
                data: {logs: [], customs: {}, customer: {}, orders: [], inventory: {}, batchs: []}
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`product/index/${this.props.id}`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
